<template>
	<view class="swiper-box">
		<view v-for="(item1,index1) in lineNum" :key="index1" class="swiper-line">
			<view :class="['swiper-rank', {'cartoon':cartoon}]" v-for="(item2,index2) in rankNum" :key="index2">
				<image :style="{transform: 'translate('+ (-100*index2/rankNum) +'%, '+(-100*index1/lineNum)+'%)',height:img_height,width:img_width}" :src="imgList[img_current]" mode="aspectFill"></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			lineNum: { // 分割成固定排数
				type: Number,
				default: 12
			},
			rankNum: { // 分割成固定列数
				type: Number,
				default: 20
			},
			rotateTime: { // 卡片旋转时间
				type: Number,
				default: 2000
			},
			periodTime: { // 卡片周期时间
				type: Number,
				default: 10000
			},
		},
		data() {
			return {
				imgList: [
					'https://xueque-msxt-oss.oss-cn-beijing.aliyuncs.com/20230505/3046bb40e178782f246e547a42255117.jpg',
					'https://xueque-msxt-oss.oss-cn-beijing.aliyuncs.com/20230505/9084652dbaf55c91806096a66718d8fb.jpg',
					'https://xueque-msxt-oss.oss-cn-beijing.aliyuncs.com/20230505/096f3f08c676ad484d9c2d35fefa1ee1.jpg'
				],
				img_height: '0px', // 图片高度
				img_width: '0px', // 图片宽度
				img_current: 0, // 图片索引
				cartoon: false, // 是否执行动画
				interval: null, // 定时器
			}
		},
		mounted() {
			this.setImgSize();
			this.setInterval();
		},
		methods: {
			/* 设置轮播图片尺寸 */
			setImgSize() {
				let view = uni.createSelectorQuery().in(this).select(".swiper-box");
				view.fields({ size: true }, ({width, height}) => {
					this.img_height = height+'px';
					this.img_width = width+'px';
				}).exec();
			},
			
			/* 设置轮播定时器 */
			setInterval() {
				if(this.rotateTime+1000 >= this.periodTime) return
				this.interval = setInterval(() => {
					this.cartoon = true;
					setTimeout(() => { this.cartoon = false }, this.rotateTime+500)
					setTimeout(() => { this.img_current = (this.img_current+1 >= this.imgList.length) ? 0 : this.img_current+1 }, this.rotateTime/2)
				}, this.periodTime)
			},
		},
		beforeDestroy() {
			// 清除定时器
			this.interval && clearInterval(this.interval)
		},
	}
</script>

<style scoped>
	.swiper-box {
		width: 100%;
		height: 100%;
		background-color: azure;
		display: flex;
		flex-direction: column;
	}
	.swiper-line {
		flex: auto;
		width: 100%;
		height: 20rpx;
		display: flex;
	}
	.swiper-rank {
		flex: auto;
		width: 20rpx;
		height: 100%;
		display: grid;
		place-items: center;
		overflow: hidden;
	}
	.cartoon {
		animation-name: cut_mode2;
		animation-duration: 2000ms;
		animation-timing-function: linear;
		/* animation-iteration-count: infinite; */
		/* animation-delay: 200ms */
	}
	@keyframes cut_mode1 {
		0% {
		    transform: rotateY(0deg);
		}
		80%{
			transform: rotateY(0deg);
		}
		90%{
			transform: rotateY(90deg);
		}
		100%{
			transform: rotateY(0deg);
		}
	}
	@keyframes cut_mode2 {
		0% {
		    transform: rotateZ(0deg);
		}
		45%{
			transform: rotateZ(180deg) scale(0);
		}
		55%{
			transform: rotateZ(180deg) scale(0);
		}
		100%{
			transform: rotateZ(360deg);
		}
	}
</style>